<template>
  <div class="detailz">
    <detailnavbar
      class="detailnav1"
      @goplace="goplace"
      :goposition="goposition"
      ref="detailnav"
    ></detailnavbar>
    <!-- <div>{{ $store.state.mallcat[0].count }}</div> -->
    <scroll class="detailscroll" ref="scrolll" @positionshow="positionshow">
      <detailswiper :topimg="topimg"></detailswiper>
      <detailbaseinfo :goods="goods"></detailbaseinfo>
      <detailshopinfo :shop="shop"></detailshopinfo>
      <detailgoodsinfo :detailInfo="detailInfo"></detailgoodsinfo>
      <detailparamsinfo
        :paramInfo="goodsparams"
        ref="params"
      ></detailparamsinfo>
      <detailcommentinfo
        :commentInfo="commentinfo"
        ref="comment"
      ></detailcommentinfo>
      <!-- 推荐这块与goodslist大部分相同，直接拿了这个组件 -->
      <goodslist :goods="recommendlist" ref="commend"></goodslist>
    </scroll>
    <detailbottombar @addcat="addcat"></detailbottombar>
    <backtop @click.native="backtop" v-show="isshow"></backtop>
  </div>
</template>
<script>
import detailnavbar from "./detailitem/detailnavbar";
import detailswiper from "./detailitem/detailswiper";
import detailbaseinfo from "./detailitem/DetailBaseInfo";
import detailshopinfo from "./detailitem/DetailShopInfo";
import detailgoodsinfo from "./detailitem/DetailGoodsInfo";
import detailparamsinfo from "./detailitem/DetailParamInfo";
import detailcommentinfo from "./detailitem/Detailcommentinfo";
import detailbottombar from "./detailitem/DetailBottomBar";
import backtop from "@/components/content/backtop/backtop";

// import detailrecommend from "./detailitem/Detailrecommend";

import {
  getdetail,
  Goods,
  Shop,
  GoodsParam,
  getdetailrecommend,
} from "@/network/detail";
import scroll from "@/components/common/scroll/scroll";
import goodslist from "@/components/content/goods/goodslist";

export default {
  name: "detail",
  components: {
    detailnavbar,
    detailswiper,
    detailbaseinfo,
    detailshopinfo,
    scroll,
    detailgoodsinfo,
    detailparamsinfo,
    detailcommentinfo,
    // detailrecommend,
    goodslist,
    detailbottombar,
    backtop,
  },
  data() {
    return {
      iid: null,
      topimg: [],
      goods: {},
      shop: {},
      detailInfo: {},
      goodsparams: {},
      commentinfo: {},
      recommendlist: [],
      goposition: [],
      isshow: false,
      count: 0,
    };
  },
  created() {
    this.iid = this.$route.query.iid;
    getdetail(this.iid).then((res) => {
      // console.log(res);
      const data = res.data.result;
      // 获取轮播图信息
      this.topimg = data.itemInfo.topImages;

      // 把请求的数据整合成一个类，实际开发常用

      // 获取商品信息
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      // console.log(this.goods);
      // 获取商品详细数据
      this.shop = new Shop(data.shopInfo);
      // console.log(this.shop);
      // 获取店铺信息
      this.detailInfo = data.detailInfo;
      // 获取参数信息
      this.goodsparams = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );
      // 获取评论信息
      if (data.rate.cRate !== 0) {
        this.commentinfo = data.rate.list[0];
      }
    });
    getdetailrecommend().then((res) => {
      // console.log(res);
      this.recommendlist = res.data.data.list;
    });
    // 这个函数是固定用法：把请求过来的数据传出去，并渲染成功后回来调用这个函数
    // this.$nextTick(() => {
    //   this.goposition = [];
    //   this.goposition.push(0);
    //   this.goposition.push(this.$refs.params.$el.offsetTop);
    //   this.goposition.push(this.$refs.comment.$el.offsetTop);
    //   this.goposition.push(this.$refs.commend.$el.offsetTop);
    //   console.log(this.goposition);
    // });
  },

  methods: {
    addcat() {
      let goodsobj = {};
      goodsobj.iid = this.iid;
      goodsobj.desc = this.goods.desc;
      goodsobj.price = this.goods.newPrice;
      goodsobj.imgURL = this.topimg[0];
      goodsobj.title = this.goods.title;
      goodsobj.count = this.count;
      this.$store.commit("addcart", goodsobj);
    },
    backtop() {
      this.$refs.scrolll && this.$refs.scrolll.scroll.scrollTo(0, 0, 500);
    },
    goplace(index) {
      this.goposition = [];
      this.goposition.push(0);
      // $el在这里配合this.$refs.params使用的，意思是拿到组件根元素（div）
      // 因为要想的到组件的offsetTop，不能直接用组件，而是用组件实例（根标签）
      this.goposition.push(this.$refs.params.$el.offsetTop);
      this.goposition.push(this.$refs.comment.$el.offsetTop);
      this.goposition.push(this.$refs.commend.$el.offsetTop);
      // console.log(this.goposition);
      this.$refs.scrolll.scroll.scrollTo(0, -this.goposition[index], 300);
    },
    positionshow(position) {
      // if中0 < -position.y < 2630这中判断不行，要写0 < -position.y && -position.y < 6933这种形式
      // if (0 < -position.y < 2630) {
      //   this.$refs.detailnav.count = 0;
      // } else if (2630 < -position.y < 3987) {
      //   this.$refs.detailnav.count = 1;
      // } else if (3987 < -position.y < 4184) {
      //   this.$refs.detailnav.count = 2;
      // } else if (4184 < -position.y < 30000) {
      //   this.$refs.detailnav.count = 3;
      // }
      if (0 < -position.y && -position.y < this.goposition[1] - 44) {
        // 这里这种语法可以响应式的改变detailnav中的count
        this.$refs.detailnav.count = 0;
      } else if (
        this.goposition[1] - 44 < -position.y &&
        -position.y < this.goposition[2] - 44
      ) {
        this.$refs.detailnav.count = 1;
      } else if (
        this.goposition[2] - 44 < -position.y &&
        -position.y < this.goposition[3] - 44
      ) {
        this.$refs.detailnav.count = 2;
      } else if (this.goposition[3] - 44 < -position.y) {
        this.$refs.detailnav.count = 3;
      }
      this.isshow = -position.y > 1000;
    },
  },
};
</script>
<style scoped>
/* 盖住tarbar */
.detailz {
  position: relative;
  /* z-index: 9;必须写在脱标的样式里面 */
  z-index: 9;
  background-color: #fff;
  /* height: 100vh;是窗口屏幕一样大 */
  height: 100vh;
}
.detailscroll {
  /* 可滚动区域的另一种写法 44px是navbar的height*/

  height: calc(100% - 44px);
}
.detailnav1 {
  position: relative;
  z-index: 9;
  background-color: #fff;
}
</style>